<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Bootstrap相册</title>

<link rel="stylesheet" href="<c:url value='/css/colorbox.css'/>" />
<!-- <link rel="stylesheet"
	href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" /> -->

<script src="<c:url value='/js/jquery.colorbox-min.js'/>"></script>
</head>
<body>
	<div class="main-content">
		<div class="breadcrumbs" id="breadcrumbs">
			<script type="text/javascript">
				try {
					ace.settings.check('breadcrumbs', 'fixed')
				} catch (e) {
				}
			</script>

			<ul class="breadcrumb">
				<li><i class="icon-home home-icon"></i> <a href="#">Home</a></li>
				<li class="active">Gallery</li>
			</ul>
			<!-- .breadcrumb -->

			<div class="nav-search" id="nav-search">
				<form class="form-search">
					<span class="input-icon"> <input type="text"
						placeholder="Search ..." class="nav-search-input"
						id="nav-search-input" autocomplete="off" /> <i
						class="icon-search nav-search-icon"></i>
					</span>
				</form>
			</div>
			<!-- #nav-search -->
		</div>

		<div class="page-content">
			<div class="page-header">
				<h1>
					Gallery <small> <i class="icon-double-angle-right"></i>
						responsive photo gallery using colorbox
					</small>
				</h1>
			</div>
			<!-- /.page-header -->

			<div class="row">
				<div class="col-xs-12">
					<!-- PAGE CONTENT BEGINS -->

					<div class="row-fluid">
						<ul class="ace-thumbnails">
							<li><a href="<c:url value='/images/gallery/image-1.jpg'/>"
								title="Photo Title" data-rel="colorbox"> <img alt="150x150"
									src="<c:url value='/images/gallery/thumb-1.jpg'/>" />
									<div class="tags">
										<span class="label-holder"> <span
											class="label label-info">breakfast</span>
										</span> <span class="label-holder"> <span
											class="label label-danger">fruits</span>
										</span> <span class="label-holder"> <span
											class="label label-success">toast</span>
										</span> <span class="label-holder"> <span
											class="label label-warning arrowed-in">diet</span>
										</span>
									</div>
							</a>

								<div class="tools">
									<a href="#"> <i class="icon-link"></i>
									</a> <a href="#"> <i class="icon-paper-clip"></i>
									</a> <a href="#"> <i class="icon-pencil"></i>
									</a> <a href="#"> <i class="icon-remove red"></i>
									</a>
								</div></li>

							<li><a href="<c:url value='/images/gallery/image-2.jpg'/>"
								data-rel="colorbox"> <img alt="150x150"
									src="<c:url value='/images/gallery/thumb-2.jpg'/>" />
									<div class="text">
										<div class="inner">Sample Caption on Hover</div>
									</div>
							</a></li>

							<li><a href="<c:url value='/images/gallery/image-3.jpg"'/>
								data-rel="colorbox"> <img alt="150x150"
									src="<c:url value='/images/gallery/thumb-3.jpg'/>" />
									<div class="text">
										<div class="inner">Sample Caption on Hover</div>
									</div>
							</a>

								<div class="tools tools-bottom">
									<a href="#"> <i class="icon-link"></i>
									</a> <a href="#"> <i class="icon-paper-clip"></i>
									</a> <a href="#"> <i class="icon-pencil"></i>
									</a> <a href="#"> <i class="icon-remove red"></i>
									</a>
								</div></li>

							<li><a href="<c:url value='/images/gallery/image-4.jpg'/>"
								data-rel="colorbox"> <img alt="150x150"
									src="<c:url value='/images/gallery/thumb-4.jpg'/>" />
									<div class="tags">
										<span class="label-holder"> <span
											class="label label-info arrowed">fountain</span>
										</span> <span class="label-holder"> <span
											class="label label-danger">recreation</span>
										</span>
									</div>
							</a>

								<div class="tools tools-top">
									<a href="#"> <i class="icon-link"></i>
									</a> <a href="#"> <i class="icon-paper-clip"></i>
									</a> <a href="#"> <i class="icon-pencil"></i>
									</a> <a href="#"> <i class="icon-remove red"></i>
									</a>
								</div></li>

							<li>
								<div>
									<img alt="150x150" src="<c:url value='/images/gallery/thumb-5.jpg'/>" />
									<div class="text">
										<div class="inner">
											<span>Some Title!</span> <br /> <a
												href="<c:url value='/images/gallery/image-5.jpg'/>" data-rel="colorbox">
												<i class="icon-zoom-in"></i>
											</a> <a href="#"> <i class="icon-user"></i>
											</a> <a href="#"> <i class="icon-share-alt"></i>
											</a>
										</div>
									</div>
								</div>
							</li>

							<li><a href="<c:url value='/images/gallery/image-6.jpg'/>"
								data-rel="colorbox"> <img alt="150x150"
									src="<c:url value='/images/gallery/thumb-6.jpg'/>" />
							</a>

								<div class="tools tools-right">
									<a href="#"> <i class="icon-link"></i>
									</a> <a href="#"> <i class="icon-paper-clip"></i>
									</a> <a href="#"> <i class="icon-pencil"></i>
									</a> <a href="#"> <i class="icon-remove red"></i>
									</a>
								</div></li>

							<li><a href="<c:url value='/images/gallery/image-1.jpg'/>"
								data-rel="colorbox"> <img alt="150x150"
									src="<c:url value='/images/gallery/thumb-1.jpg'/>" />
							</a>

								<div class="tools">
									<a href="#"> <i class="icon-link"></i>
									</a> <a href="#"> <i class="icon-paper-clip"></i>
									</a> <a href="#"> <i class="icon-pencil"></i>
									</a> <a href="#"> <i class="icon-remove red"></i>
									</a>
								</div></li>

							<li><a href="<c:url value='/images/gallery/image-2.jpg'/>"
								data-rel="colorbox"> <img alt="150x150"
									src="<c:url value='/images/gallery/thumb-2.jpg'/>" />
							</a>

								<div class="tools tools-top">
									<a href="#"> <i class="icon-link"></i>
									</a> <a href="#"> <i class="icon-paper-clip"></i>
									</a> <a href="#"> <i class="icon-pencil"></i>
									</a> <a href="#"> <i class="icon-remove red"></i>
									</a>
								</div></li>
						</ul>
					</div>
					<!-- PAGE CONTENT ENDS -->
				</div>
				<!-- /.col -->
			</div>
			<!-- /.row -->
		</div>
		<!-- /.page-content -->
	</div>
	<!-- /.main-content -->
	<script type="text/javascript">
		jQuery(function($) {
			var colorbox_params = {
				reposition : true,
				scalePhotos : true,
				scrolling : false,
				previous : '<i class="icon-arrow-left"></i>',
				next : '<i class="icon-arrow-right"></i>',
				close : '&times;',
				current : '{current} of {total}',
				maxWidth : '100%',
				maxHeight : '100%',
				onOpen : function() {
					document.body.style.overflow = 'hidden';
				},
				onClosed : function() {
					document.body.style.overflow = 'auto';
				},
				onComplete : function() {
					$.colorbox.resize();
				}
			};

			$('.ace-thumbnails [data-rel="colorbox"]')
					.colorbox(colorbox_params);
			$("#cboxLoadingGraphic").append(
					"<i class='icon-spinner orange'></i>");//let's add a custom loading icon

			/**$(window).on('resize.colorbox', function() {
				try {
					//this function has been changed in recent versions of colorbox, so it won't work
					$.fn.colorbox.load();//to redraw the current frame
				} catch(e){}
			});*/
		})
	</script>
</body>
</html>